<template>
  <el-card class="settingContent">
    <el-tabs v-model="activeName">
      <el-tab-pane label="计薪设置" name="first">
        <el-form label-width="140px" :model="salaryForm" class="form">
          <!-- 对应的社保自然月 -->
          <el-form-item label="对应社保自然月">
            <el-select v-model="salaryForm.socialSecurityType" style="width:310px">
              <el-option label="次月" :value="1" />
              <el-option label="当月" :value="2" />
            </el-select>
            <el-tooltip
              placement="bottom-start"
              effect="light"
            >
              <div slot="content" class="tipCon">如果201606月工资中扣除2016年6月自然月<br>的社保公积金，请选择当月；如果扣除2016<br>年7月自然月的社保公积金，请选择次月。</div>
              <i
                class="el-icon-question"
              />
            </el-tooltip>
          </el-form-item>
          <!-- 社保数据来源 -->
          <el-form-item label="社保数据来源" style="width:480px">
            <el-input placeholder="社保模块" disabled style="width: 310px;" />
            <el-tooltip
              content="计算工资时的五险一金金额将取自社保报表"
              placement="bottom-start"
              effect="light"
            >
              <i
                class="el-icon-question"
              />
            </el-tooltip>
          </el-form-item>
          <!-- 考勤数据来源 -->
          <el-form-item label="考勤数据来源" style="width:480px">
            <el-input placeholder="考勤模块" disabled style="width: 310px;" />
            <el-tooltip
              content="计算工资时的考勤数据将取自考勤统计表"
              placement="bottom-start"
              effect="light"
            >
              <i
                class="el-icon-question"
              />
            </el-tooltip>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="btnOk">提交</el-button>
            <el-button @click="btnReset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="津贴设置" name="second">
        <el-form label-width="140px" :model="salaryForm" class="form">
          <!-- 通用方案 -->
          <el-form-item label="通用方案">
            <el-input v-model="salaryForm.subsidyName" style="width:400px" />
          </el-form-item>
          <!-- 考勤数据来源 -->
          <el-form-item label="考勤数据来源">
            <el-input v-model="salaryForm.subsidyRemark" style="width:400px" />
          </el-form-item>
          <!-- 津贴名称 -->
          <el-form-item label="津贴名称">
            <!-- 交通补贴 -->
            <div class="subsidy">
              <el-input placeholder="交通补贴" class="tspStyle" disabled />
              <el-select v-model="salaryForm.transportationSubsidyScheme" class="tspStyle">
                <el-option v-for="item in subsidySchemes" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <el-tooltip
                :content="text"
                placement="bottom-start"
                effect="light"
              >
                <i
                  class="el-icon-question tspIcon"
                />
              </el-tooltip>
              <el-input v-model="salaryForm.transportationSubsidyAmount" class="tspStyle" />
            </div>
            <!-- 通讯补贴 -->
            <div class="subsidy">
              <el-input placeholder="通讯补贴" class="tspStyle" disabled />
              <el-select v-model="salaryForm.communicationSubsidyScheme" class="tspStyle">
                <el-option v-for="item in subsidySchemes" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <el-tooltip
                :content="text"
                placement="bottom-start"
                effect="light"
              >
                <i
                  class="el-icon-question tspIcon"
                />
              </el-tooltip>
              <el-input v-model="salaryForm.communicationSubsidyAmount" class="tspStyle" />
            </div>
            <!-- 午餐补贴 -->
            <div class="subsidy">
              <el-input placeholder="午餐补贴" class="tspStyle" disabled />
              <el-select v-model="salaryForm.lunchAllowanceScheme" class="tspStyle">
                <!-- <el-option label="每月固定" :value="3" />
                <el-option label="每日考勤" :value="1" /> -->
                <el-option v-for="item in subsidySchemes" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <el-tooltip
                :content="text"
                placement="bottom-start"
                effect="light"
              >
                <i
                  class="el-icon-question tspIcon"
                />
              </el-tooltip>
              <el-input v-model="salaryForm.lunchAllowanceAmount" class="tspStyle" />
            </div>
            <!-- 住房补助 -->
            <div class="subsidy">
              <el-input placeholder="住房补助" class="tspStyle" disabled />
              <el-select v-model="salaryForm.housingSubsidyScheme" class="tspStyle">
                <el-option v-for="item in subsidySchemes" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <el-tooltip
                :content="text"
                placement="bottom-start"
                effect="light"
              >
                <i
                  class="el-icon-question tspIcon"
                />
              </el-tooltip>
              <el-input v-model="salaryForm.housingSubsidyAmount" class="tspStyle" />
            </div>
          </el-form-item>
          <el-form-item label="通用计税方式">
            <el-radio v-model="salaryForm.taxCalculationType" :label="1">税前</el-radio>
            <el-radio v-model="salaryForm.taxCalculationType" :label="2">税后</el-radio>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="btnOk">提交</el-button>
            <el-button @click="btnReset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script>
import { savaSettings, getSettings } from '@/api/salarys'
export default {
  data() {
    return {
      activeName: 'first',
      subsidySchemes: [
        { 'id': 1, 'name': '每出勤日' },
        { 'id': 3, 'name': '每月固定' }
      ],
      salaryForm: {
        socialSecurityType: 1,
        subsidyName: '通用方案',
        subsidyRemark: '福利薪资发放规则',
        transportationSubsidyScheme: 3, // 交通补贴类型
        transportationSubsidyAmount: 0, // 交通补贴金额
        communicationSubsidyScheme: 3, // 通讯补贴类型
        communicationSubsidyAmount: 0, // 通讯补贴金额
        lunchAllowanceScheme: 3, // 午餐补贴类型
        lunchAllowanceAmount: 0, // 午餐补贴金额
        housingSubsidyScheme: 3, // 住房补助类型
        housingSubsidyAmount: 0, // 住房补助金额
        taxCalculationType: '2'

      },
      text: '每出勤日：金额*实际出勤天数； 每计薪日：金额*计薪天数； 每月固定：固定金额；'
    }
  },
  created() {
    // 页面加载，渲染页面数据
    this.initSettings()
  },
  methods: {
    // 页面一加载 渲染数据 函数
    async initSettings() {
      this.salaryForm = await getSettings()
    },
    // 点击提交按钮，发送设置请求
    async btnOk() {
      console.log(this.salaryForm)
      // 发送请求
      await savaSettings(this.salaryForm)
      // 提示用户
      this.$message.success('提交成功')
    },
    btnReset() {
      this.initSettings()
    }
  }
}
</script>

<style lang="scss" scoped>
.settingContent{
  // padding: 20px;
  margin: 20px;
  .form{
    padding-top: 10px;
  .el-icon-question:before{
    margin-left: 10px;
  }
  .tspStyle{
    width: 200px;
    margin-right: 5px;
  }
  .tspIcon:before{
    margin: 0 10px 0 5px!important;
  }
  .subsidy{
    margin-bottom: 10px;
  }
  }
}
</style>
